<template>
	<view class="memo_card_box">
		<view class="memo_header">
			<view class="joiner">
				<Avatar 
					:fileName="memoData.user.user_avatar" 
					size="50rpx"
					radius="50rpx"/>
				<view class="title text_ellipsis">
					{{memoData.title}}
				</view>
			</view>
			<view class="memo_info">
				{{memoData.content}}
			</view>
			<view class="memo_footer">
				<view class="footer_item">
					<view class="icon">
						<MyIcons size="30rpx" :src="joinSystemPath('time.png')"/>
					</view>
					<view class="data">
						{{memoData.time}}
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script setup>
	import {ref} from 'vue'
	import {
		changeWeekByNum
	} from '@/utils/changeData.js'
	import {
		dynamicStyleStore
	} from '@/stores/dynamicStyle.js'
	import {
		joinSystemPath
	} from '@/utils/imgJoinName.js'

	const dynamicStyle_store = dynamicStyleStore()
	
	const {
		primary_text_color,
		shallow_text_color
	} = dynamicStyle_store.dormitoryStyle	
	
	const props = defineProps({
		memoData:{
			type:Object
		}
	})
</script>

<style lang="less">
	.text_ellipsis {
		white-space: nowrap;
		text-overflow: ellipsis;
		overflow: hidden;
	}
	.memo_card_box{
		margin-left: 10rpx;
		background-color: #FFFFFF;
		padding: 5rpx 20rpx;
		border-radius:10rpx;
		// padding-bottom: 5rpx;
		width: calc(81vw);
		.memo_header{
			padding: 10rpx 0;
			font-size: 30rpx;
			color: v-bind(primary_text_color);
			.joiner{
				margin-bottom: 10rpx;
				width: 100%;
				display: flex;
				align-items: center;
				gap:10rpx;
				color: v-bind(primary_text_color);
				.title{
					width: 70%;
				}
				.avatar{
					margin-right: 10rpx;
					width: 70rpx;
				}
			}
		}
		.memo_info{
			margin: 6rpx 0;
		}
		.memo_footer{
			color: v-bind(shallow_text_color);
			.footer_item{
				display: flex;
				align-items: center;
				font-size: 25rpx;
				margin-left: -4rpx;
			}
		}
		.pupub_item{
			width: 100%;
			display: flex;
			justify-content: center;
		}
	}
</style>